<template>
  <div class="w-full bg-[#f7f7f7]" id="div-1">
    <!-- <div class="m-auto w-3/5 bg-[#fff]">1231</div> -->
    <div class="m-auto w-3/5 pb-8" id="div-27">
      <a-row :gutter="15" id="div-28">
        <a-col :span="17" class="" id="div-29">
          <a-row :gutter="[14, 14]" id="div-30">
            <a-col :span="12" class="" v-for="(data, index) in bottom" :key="index" :id="`div-31-${index}`">
              <div class="bg-[#fff] border-solid border border-[#ccc] !p-[14px]" :id="`div-32-${index}`">
                <div class="leading-[20px] mb-[10px]" :id="`div-33-${index}`">
                  <span class="text-[16px] text-[#D62A3B]" :id="`div-34-${index}`">{{ data.bottomTitle.title }}</span>
                  <a-typography-link href="#" :id="`div-35-${index}`" class="text-[12px] !text-[#999] float-right">更多»</a-typography-link>
                </div>
                <a-row :id="`div-36-${index}`" class="flex" :gutter="10">
                  <a-col :span="6" :id="`div-37-${index}`">
                    <a-image
                      :src="data.bottomTitle.avatar"
                      width="100%"
                      height="100%"
                      class="object-cover aspect-[4/3]"
                      :id="`div-38-${index}`"
                    />
                  </a-col>
                  <a-col :span="18" class="" :id="`div-39-${index}`">
                    <a-typography-link href="#" class="!text-[#444] text-[16px] mt-2 !mb-0 pl-[10px]" :id="`div-40-${index}`">
                      {{ data.bottomTitle.content }}
                    </a-typography-link>
                    <a-typography-paragraph
                      class="text-gray-400 text-sm !mb-0 absolute bottom-0 right-0 leading-none"
                      :id="`div-41-${index}`"
                      >02-05</a-typography-paragraph
                    >
                  </a-col>
                </a-row>
                <a-divider class="my-[10px]" :id="`div-42-${index}`" />
                <a-row :gutter="20" class="mt-[14px]" :id="`div-43-${index}`">
                  <a-col :span="24" v-for="(item, ind) in data.bottomList" :key="ind" class="my-[6px]" :id="`div-44-${index}-${ind}`">
                    <a-row :wrap="false" class="items-center" :id="`div-45-${index}-${ind}`">
                      <a-col flex="none" :id="`div-46-${index}-${ind}`">
                        <div class="w-[6px] h-[6px] rounded-full bg-[#333]" :id="`div-47-${index}-${ind}`"></div
                      ></a-col>
                      <a-col
                        flex="auto"
                        class="overflow-hidden whitespace-nowrap text-ellipsis text-[14px] pl-[5px]"
                        :id="`div-48-${index}-${ind}`"
                      >
                        <a-typography-link href="#" :id="`div-481-${index}-${ind}`" class="!text-[#444]">{{
                          item.title
                        }}</a-typography-link>
                      </a-col>
                      <a-col flex="none" :id="`div-49-${index}-${ind}`">
                        <div class="text-gray-400 text-sm ml-[40px]" :id="`div-50-${index}-${ind}`"> {{ item.date }}</div>
                      </a-col>
                    </a-row>
                  </a-col>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="jsx">
  const bottom = ref([
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/13/100/75',
        content: '极速空间笔记本CPU天梯图2025（移动版CPU性能排行）',
        title: 'CPU',
      },
      bottomList: [
        {
          title: '极速空间CPU天梯图2024（intel和AMD CPU性能排行）——跟小虫学电脑配置',
          date: '08-13',
        },

        {
          title: '换个名字算新品？AMD 200系列笔记本CPU天梯图2025新版',
          date: '06-17',
        },
        {
          title: '极速空间 2025年新年力作：CPU AI性能天梯图DIY版  正式发布',
          date: '02-04',
        },
        {
          title: '平庸和潜力共存，酷睿Ultra200S助英特尔重归王座',
          date: '01-20',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/14/100/75',
        content: 'AMD主板芯片组参数速查表(202410)',
        title: '主板',
      },
      bottomList: [
        {
          title: 'Intel主板芯片组参数速查表（202410版）',
          date: '08-13',
        },
        {
          title: '你准备买哪张车票？——华硕微星技嘉主板的系列介绍',
          date: '01-20',
        },
        {
          title: 'AMD 300/400/500/600主板芯片组的区别',
          date: '06-17',
        },
        {
          title: '一张图看清intel 100、200、300、400、500、600主板芯片组的区别',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/15/100/75',
        content: '极速空间显卡天梯图 （2024台式显卡和笔记本显卡性能排行）——跟小虫学电脑配置',
        title: '显卡',
      },
      bottomList: [
        {
          title: '两分钟看懂RTX50系列显卡（RTX50/40显卡参数速查表）',
          date: '08-13',
        },
        {
          title: '摩尔线程MTT S80，国产游戏显卡从0到1的进步',
          date: '01-20',
        },
        {
          title: '问核显世界,谁主沉浮？集成显卡的发展历程及英雄排名（CPU核心显卡天梯图）',
          date: '06-17',
        },
        {
          title: '2024年7月新文《问核显世界，谁主沉浮》已在“今日头条-小虫站长”号 首发',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/16/100/75',
        content: '十大高性价比固态硬盘（小虫2022年6月排行） 附问答：120GB固态硬盘够用吗',
        title: '内存硬盘',
      },
      bottomList: [
        {
          title: '谁才是内存的老大：内存的频率谁说了算，是CPU还是主板？ ',
          date: '08-13',
        },
        {
          title: '单枪匹马入沙场，双剑合璧霸天下：探索双通道高频内存性价比（AMD独显平台）',
          date: '01-20',
        },
        {
          title: '固态硬盘什么牌子好（30个实力品牌同场较量）',
          date: '06-17',
        },
        {
          title: '一阵表演猛如虎，一看门票收入2元5 ：探索双通道高频内存性价比（intel独显平台）',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/17/100/75',
        content: '成都初中/小学 数学辅导 一对一仅100元起',
        title: '机箱电源其它',
        more: '更多',
      },
      bottomList: [
        {
          title: '通知：极速空间不定时启用验证码访问',
          date: '08-13',
        },
        {
          title: '从低学历到全球顶尖学者，草根逆袭之“四大天王',
          date: '01-20',
        },
        {
          title: '站长帮您选电脑（VIP一对一）专业级服务，特价30元',
          date: '06-17',
        },
        {
          title: '小虫站长研发的产品：好习惯亲子棋，边玩边学',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/18/100/75',
        content: '十大高性价比游戏电脑主机（小虫精选游戏电脑配置2025年2月排行）',
        title: '台式电脑',
      },
      bottomList: [
        {
          title: '一封匿名举报信和商战（电脑游戏室往事/第五篇 ）',
          date: '08-13',
        },
        {
          title: '侦察兵发现小工贪腐（电脑游戏室往事/第四篇）',
          date: '01-20',
        },
        {
          title: '裤兜插砖和骨灰级玩家（电脑游戏室往事/第三篇）',
          date: '06-17',
        },
        {
          title: '富二代和穷十八代（电脑游戏室往事/第一篇）',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/19/100/75',
        content: '十大高性价比显示器（2024年11月小虫排行榜）',
        title: '显示器',
      },
      bottomList: [
        {
          title: '十大高性价比电竞显示器（2021年4月小虫排行榜',
          date: '08-13',
        },
        {
          title: '旋转升降支架值不值100块？AOC电竞显示器24G2和24G2E的区别',
          date: '01-20',
        },
        {
          title: '餐厅内发生的故事：良心发现还是老谋深算',
          date: '06-17',
        },
        {
          title: '电脑显示器什么牌子好',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/20/100/75',
        content: '十大高性价比轻薄本（2025年2月小虫排行榜）',
        title: '笔记本电脑',
      },
      bottomList: [
        {
          title: '算算二手游戏本性价比，“旧比新贵”背后的深层逻辑',
          date: '08-13',
        },
        {
          title: '二手笔记本电脑精选机型（2024年11月更新）',
          date: '01-20',
        },
        {
          title: '十大高性价比游戏本（小虫2024年11月游戏本排行榜）',
          date: '06-17',
        },
        {
          title: '游戏看锐龙，轻薄赏明月（笔记本选购之武功秘籍第一册，适用于2024年10月）',
          date: '02-04',
        },
      ],
    },
  ]);
</script>

<style></style>
